<template>

  <el-dialog
    :destroy-close="true"
    :visible.sync="visible"
    append-to-body
    lock-scroll
    modal
    modal-append-to-body
    show-close
    title="焦虑循环"
    width="50%"
    @close="close"
  >

    <div class="cycle-wrapper">
      <div class="cycle-item">
        <h3>1. 诱因</h3>

        <span v-for="item in info.anxietyCycle[0] " :key="'cycle-item-1-'+item">{{ item }}</span>
      </div>

      <img class="arrow right-arrow" src="@/assets/images/arrow.png">

      <div class="cycle-item">
        <h3>2. 想法</h3>
        <span v-for="item in info.anxietyCycle[1] " :key="'cycle-item-2-'+item">{{ item }}</span>
      </div>

    </div>

    <div class="middle-wrapper cycle-wrapper">

      <div class="arrow-item">
        <img class="arrow up-arrow" src="@/assets/images/arrow.png">

      </div>

      <div class="arrow-item" />
      <div class="arrow-item">
        <img class="arrow down-arrow" src="@/assets/images/arrow.png">

      </div>
    </div>

    <div class="cycle-wrapper">
      <div class="cycle-item">
        <h3>4. 对学习和生活的影响</h3>
        <span v-for="item in info.anxietyCycle[3] " :key="'cycle-item-4-'+item">{{ item }}</span>
      </div>

      <img class="arrow left-arrow" src="@/assets/images/arrow.png">
      <div class="cycle-item">
        <h3>3. 身体感受</h3>
        <span v-for="item in info.anxietyCycle[2] " :key="'cycle-item-3-'+item">{{ item }}</span>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { GetAnxietyCycle } from '@/api/api'

export default {
  name: 'PatientAnxietyCycleDialog',
  data() {
    return {
      visible: false,
      info: null
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const res = await GetAnxietyCycle({ userId: this.$route.query.id })
        const { code, msg, data } = res.data
        if (code !== 200) {
          this.$message.info(msg)
          return
        }
        const cycles = data.anxietyCycle ? JSON.parse(data.anxietyCycle) : data.anxietyCycle

        data.anxietyCycle = cycles.map(item => {
          if (typeof item === 'string') {
            return [item]
          }
          return item
        })
        this.info = data
      } catch (e) {
        console.error(e)
      }
    },
    close() {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>

.cycle-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;

  .cycle-item {
    flex: 1;
    width: 40%;
    //margin: 10px 10px;

    padding: 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

    span {
      margin-right: 5px;
    }
  }

  .arrow {
    flex: 1;

    margin: 10px;
    height: 44px;
    width: 100px;
    object-fit: contain;

    &.left-arrow {
      transform: rotate(180deg);
    }

    &.up-arrow {
      transform: rotate(-90deg);
    }

    &.down-arrow {
      transform: rotate(90deg);
    }
  }

}

.middle-wrapper {
  justify-content: space-between;

  .arrow-item {
    margin: 10px 0;
    text-align: center;
    flex: 1;

    &:first-child {

      //margin-left: 15%;
    }

    &:last-child {

      //margin-right: 15%;
    }
  }
}

</style>
